<template>
  <div class="line-content">
    <viHeader
      :title="configurationInformation.title"
      :radioList="configurationInformation.radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!configurationInformation.showHeader"
    />
    <div class="charts" ref="reference"></div>
  </div>
</template>
<script>
import viHeader from "@/components/visualization/header/index";
import echarts from "echarts";
export default {
  name: "vi-line",
  components: {
    viHeader,
  },
  props: {
    configurationInformation: {
      default: {
        title: "",
      },
    },
    showHeader: {
      default: true,
      type: Boolean,
      require: false,
    },
  },
  data() {
    return {
      invoiceCollection: {},
      echartInit: null,
    };
  },
  mounted() {
    this.$once("hook:beforeDestory", () => {
      this.echartInit.dispose();
      this.echartInit = null;
    });
  },
  methods: {
    draw(val) {
      this.invoiceCollection = val;
      this.initChart();
    },
    enlarge() {
      this.$emit("enlarge");
    },
    changeRadio(val) {
      this.$emit("changeRadio", val.radio);
    },
    initChart() {
      const chart = echarts.init(this.$refs.reference);
      chart.clear(); //每次绘制清除一次画布
      this.echartInit = chart;
      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["开票", "收款"],
          x: "top",
          y: "left",
          padding: [10, 0, 0, 16],
          textStyle: {
            fontSize: 14,
            color: "rgba(0,0,0,.48)",
          },
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 12,
        },
        grid: {
          top: "50",
          left: "16",
          right: "26",
          bottom: "12",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {

            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}开票:${params[0].value}万元`;
            const tip2 = `${params[1].marker}收款:${params[1].value}万元`;
            return `${time}</br>${tip1}</br>${tip2}`;
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.invoiceCollection.xData,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.12)",
            },
          },
          axisLabel: {
            color: "rgba(0,0,0,.48)", //x轴文本颜色
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
          //   show:false,
        },
        series: [
          {
            name: "开票",
            type: "line",
            symbol: "circle",
            color: "#E54539",
            data: this.invoiceCollection.yData1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 4, //设置线条粗细
                },
              },
            },
            lineStyle: {
              shadowColor: "rgba(229, 69, 57, .08)",
              shadowBlur: 3,
              shadowOffsetY: 12,
            },
          },
          {
            name: "收款",
            type: "line",
            symbol: "circle",
            color: "#35BCEF",
            data: this.invoiceCollection.yData2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2, //设置线条粗细
                },
              },
            },
            lineStyle: {
              shadowColor: "rgba(53, 188, 239, 0.16)",
              shadowBlur: 3,
              shadowOffsetY: 12,
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../styles/line.scss";
</style>
